<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入layui的css样式文件-->
    <link rel="stylesheet"
          type="text/css"
          href="/layui/css/layui.css"/>
</head>
<body>

<!--根据部门名称进行搜索-->
<form class="layui-form-item" id="searchFrm" lay-filter="searchFrm">
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input type="text" name="searchDeptName" id="searchDeptName" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline" style="width: 100px;">
            <button type="button" class="layui-btn" lay-submit="" lay-filter="btnDeptSearch">搜索</button>
        </div>
    </div>
</form>
<!--
数据表格:
1.定义表格标签
2.通过layui表格组件渲染表格标签
3.在表格组件中指明表格加载的数据来源
-->
<table class="layui-table" id="test" lay-filter="test"></table>

<form class="layui-form" lay-filter="deptFrm" id="deptFrm" style="display: none;padding:10px">
    <!--用隐藏域存储当前弹出表单要提交的后台接口地址-->
    <input type="hidden" name="action" id="action"/>
    <!--用与存储修改时要使用部门编号字段-->
    <input type="hidden" name="deptId" id="deptId"/>
    <div class="layui-form-item">
        <label class="layui-form-label">部门名称</label>
        <div class="layui-input-block">
            <input type="text" name="deptName" lay-verify="required" autocomplete="off" placeholder="请输入部门名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">部门状态</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="0" title="可用" checked>
            <input type="radio" name="status" value="1" title="禁用" >
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" lay-submit="" lay-filter="btnDeptSave">保存</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!--定义表格上方的工具条-->
<script type="text/html" id="toolbarTab">
    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-sm" lay-event="add">新增</button>
    </div>
</script>

<!--定义每一行的工具条-->
<script type="text/html" id="toolbarRow">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!--引入layui js文件-->
<script type="text/javascript" src="/layui/layui.all.js"></script>
<!--定义自己的js代码块-->
<script type="text/javascript">
    //layui: layui组件封装好的对象
    //use: 是layui的一个特定方法,可以引入组件，实现功能
    layui.use(["layer","laydate","table","form"],function(){
        //获取table组件对象
        var table = layui.table;
        //获取表单组件对象
        var form=layui.form;
        //获取jq对象
        var $=layui.$;

        //使用table组件渲染表格标签
        table.render({
            elem:"#test" //定义要渲染的目标表格标签
            ,url:"/dept/list"  //定义要获取的服务器数据地址
            ,toolbar:"#toolbarTab" //引用表格工具条，添加一个新增按钮
            ,page:true //开启分页
            ,limit:10    //设置每页显示几条数据
            ,limits:[5,10,15] //配置每页可选的显示条数
            ,cols:[
                [
                    {field:'deptId', width:120, title: '部门编号', sort: true}
                    ,{field:'deptName', width:120, title: '部门名称'}
                    ,{field:'status', width:80, title: '状态', templet:function (d){
                        //templet:定义列模板函数，在模板函数中处理数据
                        //参数d:存储了当前行的对象数据
                        //console.log(d);
                        if(d.status=='0'){
                            return "<span style='color:green;'>可用</span>";
                        }else{
                            return "<span style='color:red;'>禁用</span>"
                        }
                    }}
                    ,{field:'deleteFlag', width:100, title: '删除标记',hide:true}
                    ,{field:'createBy', title: '创建人', width: '100', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    ,{field:'createTime', title: '创建时间', width:180, sort: true}
                    ,{field:'updateBy', title: '修改人', width:100, sort: true}
                    ,{field:'updateTime', title: '修改时间', width:180}
                    ,{fixed: 'right', title:'操作', toolbar: '#toolbarRow', width:150}
                ]
            ]
        })

        //监听表格工具条的按钮事件
        table.on("toolbar(test)",function (obj){
            //当表格工具条中的按钮点击的时候，输出触发的事件对象信息
            //console.log(obj);
            switch (obj.event){
                case "add":  //针对添加按钮的单击，做对应处理
                    //layer.msg("你点击了新增",{icon:6})
                    //点击添加按钮的时候，先将表单内容清理掉
                    deptFrm.reset();
                    //设置本次弹出表单提交数据的接口地址
                    $("#action").val("/dept/add");
                    //清空deptId
                    $("#deptId").val("");
                    //弹出表单
                    layer.open({
                        type:1, //弹出页面层
                        content:$("#deptFrm")
                    })
                    break;
            }
        })

        //监听行工具事件
        table.on('tool(test)', function(obj){
            //obj:保存了当前行的数据对象
            console.log(obj)

            var data = obj.data;

            //点击行工具条中的删除按钮
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    //向后台发起删除请求
                    $.ajax({
                        url:"/dept/delete",
                        data:{deptId:data.deptId},
                        type:"delete",
                        dataType:"json",
                        success:function (res){
                            //删除成功
                            if(res.code==0){
                                layer.closeAll();
                                layer.msg("删除成功",{icon:6});
                                //刷新表格
                                table.reload("test");
                            }else{
                                layer.msg("删除失败",{icon:5});
                            }
                        }
                    })
                });
            } else if(obj.event === 'edit'){ //做修改操作
                //设置本次弹出表单提交数据的接口地址
                $("#action").val("/dept/update");
                //弹出表单
                layer.open({
                    type:1, //弹出页面层
                    content:$("#deptFrm")
                })
                //将要修改的数据行的值，设置到表单中
                form.val("deptFrm",obj.data);
            }
        });

        //通过表单对象监听表单提交按钮的单击事件
        form.on("submit(btnDeptSave)",function (obj){
            //单击提交时，输出表单对象数据
            //console.log(obj);
            //通过jq发起ajax请求，将表单数据传入controller
            $.ajax({
                url:$("#action").val(), //提交的目标处理程序
                type:"post", //提交请求的方式
                data:obj.field, //提交的数据
                dataType:"json", //服务器返回的数据类型
                success:function (res){
                    if(res.code==0){
                        //关闭表单层
                        layer.closeAll();
                        //提示成功消息
                        layer.msg("保存成功",{icon:6});
                        //刷新表格，重新加载数据
                        table.reload("test");
                    }else{
                        layer.msg(res.msg,{icon:5});
                    }
                }
            })

            return false;
        })

        //针对搜索表单做事件监听
        form.on("submit(btnDeptSearch)",function (obj){
            console.log("===============")
            console.log(obj);
            //触发表格重新根据查询条件请求数据
            table.reload("test",{
                where:{
                    searchDeptName:$("#searchDeptName").val() //查询条件
                },
                page:{
                    curr:1 //从第1页，显示结果
                }
            })
        })
    });

</script>
</body>
</html>